<template>
  <div class="main" v-for="(item, index) in xdata" :key="index">
    <el-card class="box-card topcard">
      <div class="left">
        <div class="info">
          <img :src="defurl" />
          <div>{{ item.essay.name }}</div>
        </div>
      </div>
      <div
        class="essay"
        @click="
          detailsclick(item.essay.name, item.essay.uid, item.essay.userid)
        "
      >
        <div
          class="label"
          :class="item.essay.type > 0 ? 'islabel' : 'isarticle'"
        >
          {{ item.essay.type > 0 ? "问题" : "文章" }}
        </div>
        <h2>{{ item.essay.title }}</h2>
        <el-container>
          <el-aside width="200px" class="themehead"
            ><img :src="defurl"
          /></el-aside>
          <el-main>
            <div class="main-text" @click="read">
              <span v-html="zzystring(item.essay.content)"></span></div
          ></el-main>
        </el-container>
      </div>
      <div class="trail">
        <el-button @click="applaud1(item.essay.uid, item.essay.userid)"
          ><template #icon
            ><el-icon :class="isprimary1 == true ? 'z-icon' : ''"
              ><CaretTop /></el-icon></template
          ><span
            >赞同{{ item.essay.like ? item.essay.like : "" }}</span
          ></el-button
        >
        <el-button
          :color="!isprimary == true ? '#e5efff' : '#0066ff'"
          class="z"
          @click="applaud"
          ><template #icon>
            <el-icon :class="isprimary == true ? 'z-icon' : ''"
              ><CaretBottom
            /></el-icon> </template
        ></el-button>
        <div class="function">
          <ul>
            <li v-for="(item, index) in tdata" :key="index">{{ item }}</li>
            <li style="color: #e8c95f" v-if="item.essay.reward">
              赏金 {{ item.essay.reward }} 元
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script >
import { defineComponent, computed, toRaw, watch, ref, reactive } from "vue";
import router from "@/router";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {},
  props: {
    answerlist: {
      type: Object,
      default: () => {},
    },
  },
  setup() {
    //
    const tdata = ["分享", "收藏", "喜欢"];
    const isprimary = ref(false);
    const isprimary1 = ref(false);
    const applaud = () => {
      console.log("999");
      isprimary.value = !isprimary.value;
    };
    const applaud1 = (aid, userid) => {
      console.log(aid, userid);
      isprimary1.value = !isprimary1.value;
      store.dispatch("main/putarticle", { aid, userid });
    };
    //从vuex里拿到数据
    const store = useStore();
    //界面创建的 时候 发送网络请求
    //路由跳转
    const zrouter = useRouter();
    store.dispatch("main/getcontent");
    const zzystring = (str) => {
      return str.slice(0, 100) + `...阅读更多`;
    };
    //点击展开按钮
    const read = () => {
      console.log("00");
    };
    const c = (e) => {
      console.log(e);
      //   switch (e) {
      //     case "0":
      //       console.log("j");
      //       data;
      //       break;
      //   }
    };
    //获取当前 文章的 的回答
    const lm = reactive({
      l: 0,
      m: 1,
    });
    const detailsclick = (name, id, userid) => {
      //调用 store
      console.log(id, "文章id");
      store.dispatch("comment/getarticlereply", {
        articleid: id,
        userid,
        ...lm,
      });
      zrouter.push({
        path: "/question",
        query: {
          name,
          id,
        },
      });
    };
    //获取文章
    const xdata = computed(() => store.getters["main/getessay"]);
    console.log(toRaw(xdata), "xdata");
    const defurl = require("@/assets/images/log.png");
    watch(
      () => router.currentRoute.value.params.id,
      (to) => {
        //
        c(to);
      }
    );

    return {
      tdata,
      applaud,
      isprimary,
      applaud1,
      isprimary1,
      zzystring,
      read,
      detailsclick,
      xdata,
      defurl,
    };
  },
});
</script>

<style scoped lang="less">
.main {
  margin-bottom: 10px;

  width: 740px !important;
  .topcard {
    border-top: 0;
    .left {
      .info {
        display: flex;
        align-items: center;
        > img {
          width: 50px;
          height: 30px;
        }
      }
    }
    .essay {
      > h2 {
        margin-top: 0;
        margin-left: 50px;
      }
      > h2:hover {
        color: #175199;
        cursor: pointer;
      }
      .label {
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: relative;
        top: 30px;
        left: 5px;
      }
      .islabel {
        background-color: #fde8e6;
        color: #f9afa9;
      }
      .isarticle {
        background-color: #e5efff;
        color: #0066ff;
      }
    }
    .main-text {
      display: flex;
      > span:hover {
        cursor: pointer;
        color: #646464;
      }
      > button {
        display: inline;
        padding: 0;
        margin-left: 0px;
        color: #175199 !important ;
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
      }
      .main-text-bt {
        color: #094a8b;
        &.main-text-bt:hover {
          color: #929292;
        }
      }
    }
  }
  /deep/.trail {
    display: flex;
    .function {
      margin-left: 30px;
      > ul {
        display: flex;
        text-align: center;
        padding: 0;
        margin: 0;
        > li {
          color: #a3abbc;
          position: relative;
          display: block;
          height: 30px;
          line-height: 30px;
          margin-left: 20px;
        }

        &:hover {
          cursor: pointer;
        }
      }
    }
    .el-button {
      .el-icon {
        color: #0066ff;
      }
      > span {
        color: #0066ff;
      }
    }
    .z {
      margin-left: 5px;
    }
    .z-icon {
      color: #f8f5f5 !important;
    }
  }
}
.themehead {
  > img {
    width: 190px;
    height: 105px;
  }
}
</style>
